<template>
	<view class="page">
		<view class="item">
			<text class="title">推荐人姓名</text>
			<view class="content">
				<input type="text" v-model="form.name" value="请输入您的姓名" placeholder="请输入您的姓名" />
			</view>
		</view>
		<view class="item">
			<text class="title">性别</text>
			<view class="content">
				<picker mode="selector" :value="form.gender" :range="genderOption" :range-key="'text'"
					@change="bindGenderChange">
					<view class="picker">{{genderOption[index].text ?genderOption[index].text:'请选择您的性别'}}</view>
				</picker>
			</view>
		</view>
		
		<view class="item">
			<text class="title">手机号</text>
			<view class="content">
				<input type="number" v-model="form.phone" placeholder="请输入您的手机号" maxlength="11" />
			</view>
		</view>
		
		<view>
		
			<button class="sbutton" type="default" hover-class="button-hover" @click="submit()" :disabled="isInput">保存</button>
		</view>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk'
	export default {
		data() {
			return {
				isInput:false,
				index: 0,
				form: {
					name: getApp().globalData.userInfo.referrer.name,
					gender: getApp().globalData.userInfo.referrer.gender,
					phone:getApp().globalData.userInfo.referrer.phone
				},
				genderOption: [{
						value: 0,
						text: '男'
					},
					{
						value: 1,
						text: '女'
					}
				],
				referrer:getApp().globalData.userInfo.referrer
			}
		},
		created() {
			this.setIsInput()
		},
		
		methods: {

			bindGenderChange: function(e) {
				this.form.gender = e.target.value;
				// this.index = e.target.value;
				console.log(this.form.gender);
			},
			setIsInput:function(){
				if(getApp().globalData.userInfo.referrer.name){
					this.isInput = true
				}
				else{
					this.isInput = false
				}
			},
			submit:function(){
				let that = this;
				if(this.form.name == ''||this.form.phone == ''||this.form.gender == ''){
					uni.showToast({
						title:'请将信息填写完毕',
						icon:'none'
					})
				}
				else{
					cloudbase.database().collection('user').where({
						realName:that.form.name,
						phone:that.form.phone,
						gender:that.form.gender
					}).get().then(res=>{
						console.log(res);
						let list = res.data;
						if(list.length!=0){
							getApp().globalData.userInfo.referrer.openId = list.openId;
							getApp().globalData.userInfo.referrer.name = that.form.name;
							getApp().globalData.userInfo.referrer.gender = that.form.gender;
							getApp().globalData.userInfo.referrer.phone = that.form.phone;
							cloudbase.database().collection('user').where({openId:getApp().globalData.userInfo.openId}).update({
								referrer:getApp().globalData.userInfo.referrer
							}).then(res=>{
								console.log('更新结果：')
								console.log(res);
								
							})
						}
					})
				}
			}
		}
	}
</script>

<style>
	.page {

		width: 750rpx;
		height: 1334rpx;
		/* height: 1020rpx; */
		padding-bottom: 60px;
		background-color: #F3F5F7;
	}

	.item {
		width: 622rpx;
		height: 133rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20rpx;

	}

	.title {
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 15rpx;

		/* margin-left: 64rpx; */
		/* margin-right: 64rpx; */

	}

	.content {
		width: 622rpx;
		height: 92rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 4px 6px rgba(0, 0, 0, .05);
		border-radius: 16rpx;
		/* margin-left: 64rpx; */
		/* margin-right: 64rpx; */
		line-height: 92rpx;
		font-size: 14px;
		padding-left: 14px;
		color: #A2A2A2;
	}

	.content input {
		height: 92rpx;
		line-height: 92rpx;

		color: #A2A2A2;
	}

	.sbutton {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		width: 200rpx;
		height: 96rpx;
		background-color: #FD973F !important;
		border-radius: 20px;
		color: #FFFFFF !important;
		margin-top: 68rpx;
	}

	.button-hover {
		background-color: rgba(0, 0, 0, 0.1) !important;
		opacity: 0.7;
	}
</style>
